<template>
  <q-img :class="classes" :ratio="ratio" :src="image" error-src="~assets/IMG-ERROR.png" fit="contain"
         @click.stop="emits('click')">
    <slot name="default"></slot>
  </q-img>
</template>
<script setup>
import { userStores } from 'stores/user-stores.js'
import { computed } from 'vue'

const props = defineProps({
  imageUrl: String, carrierType: { type: String, default: '' },
  ratio: { type: [String, Number], default: 1 }, prefix: { type: String, default: 'Rack' },
  classes: { type: String, default: 'col-6 cursor-pointer cursor-hover-image rounded-borders' }
})
const emits = defineEmits(['click'])

const userStore = userStores()
const OSSPath = computed(() => userStore.OSSPath)
const image = computed(() => props.imageUrl ? `${OSSPath.value}/${props.imageUrl}` : formatAMRTypeImage.value)
const formatAMRTypeImage = computed(
  () => new URL(`/src/assets/Carrier_IMG/${props.prefix}_${props.carrierType.toUpperCase()}.png`, import.meta.url).href)
</script>